
<!-- 系统日志，lbw -->
<script setup lang="ts" name="SystemLog">
import {onActivated, reactive, ref} from 'vue'
import {onMounted} from 'vue'
import { FormRules} from 'element-plus'
import {
  HeaderData
} from '@/components/dTable/dTable'
import {
  OperButton,
  SearchFromItem,
  SearchButton,
  SearchFromJustify
} from '@/components/dTable/dHeader'
import {
  PageConfig,
  defaultPage,
  defaultPageSize,
  defaultPageSizes,
  defaultLayout
} from '@/components/dTable/dFooter'

import {getLogList, GetLogList} from '@/api/baseSetting/systemLog'
import pageContainer from '@/components/pageContainer.vue'
import { transfDicArrData} from '@/util/common'
import dTablePromote from '@/components/dTable/dTablePromote.vue'
import {SeleteData} from '@/api/config'
import userCommon from '@/store/common'
import {disabledAfterDate} from '@/util/common'
const common = userCommon.setup().store
// 字典
const operationTypeList = ref<Array<SeleteData>>([])
const resultNameList = ref<Array<SeleteData>>([])
const getDict = () => {
  operationTypeList.value.length = 0
  resultNameList.value.length = 0
  // 操作类型
  common.getDicData('operation_type').then((res) => {
    const arr: Array<SeleteData> = transfDicArrData(res)
    arr.forEach((item) => {
      operationTypeList.value.push(item)
    })
  })
  common.getDicData('success_fail').then((res) => {
    const arr: Array<SeleteData> = transfDicArrData(res)
    arr.forEach((item) => {
      resultNameList.value.push(item)
    })
  })
}

//数据
const tableData = ref<Array<GetLogList >>([])

//显示加载状态
const showLoading = ref(false)

//表格数据
const tableHeaderData = ref<Array<HeaderData>>([
  {
    prop: 'loginName',
    label: '登录账号',
    columnType: 'text',
    align: 'left',
    'min-width': '100'
  },
  {
    prop: 'userName',
    label: '姓名',
    columnType: 'text',
    align: 'left',
    'min-width': '100'
  },
  {
    prop: 'ip',
    label: 'IP',
    columnType: 'text',
    align: 'left',
    'min-width': '120'
  },
  {
    prop: 'operationTypeName',
    label: '操作类型',
    columnType: 'text',
    align: 'left',
    'min-width': '80'
  },
  {
    prop: 'menuName',
    label: '菜单名称',
    columnType: 'text',
    align: 'left',
    'min-width': '100'
  },
  {
    prop: 'resultName',
    label: '操作结果',
    columnType: 'text',
    align: 'left',
    'min-width': '95'
  },
  {
    prop: 'errorMsg',
    label: '错误提示',
    columnType: 'text',
    align: 'left',
    'min-width': '185'
  },
  {
    prop: 'operationTime',
    label: '操作时间',
    columnType: 'text',
    align: 'left',
    'min-width': '167'
  },
  {
    prop: 'logContents',
    label: '日志内容',
    columnType: 'text',
    align: 'left',
    'min-width': '481'
  }

])

//表头
const operButtons = ref<Array<OperButton>>([

])


//搜索项
const searchFromItems = ref<Array<SearchFromItem>>([
  {
    label: '登录账号',
    placeholder: '请输入登录账号',
    type: 'input',
    prop: 'loginName',
    enterSubmit: true
  },
  {
    label: '姓名',
    placeholder: '请输入姓名',
    type: 'input',
    prop: 'userName',
    enterSubmit: true
  },
  {
    label: '操作类型',
    placeholder: '请选择操作类型',
    type: 'selete',
    prop: 'operationType',
    seleteData: operationTypeList.value
  },
  {
    label: '菜单名称',
    placeholder: '请输入菜单名称',
    type: 'input',
    prop: 'menuName',
    enterSubmit: true
  },
  {
    label: '操作结果',
    placeholder: '请选择操作结果',
    type: 'selete',
    prop: 'result',
    seleteData: resultNameList.value
  },
  {
    label: '操作时间',
    placeholder: ['开始时间', '结束时间'],
    type: 'antdRange',
    prop: 'operationTime',
    disabledDate:disabledAfterDate,
    showTime: false,
    changeSubmit: true,
    notClearable: true,
    dateFormat: 'YYYY-MM-DD',
    style: {width: '310px'}
  }
])

const searchFromData = reactive<GetLogList>({loginName: null, userName:null, operationType:null, menuName:null,
  result:null, operationTime:null})
const searchFromRules = reactive<FormRules>({
  loginName: [
    {
      required: false,
      message: '长度应不超过20个字符',
      max: 20,
      trigger: ['change', 'blur']
    }
  ],
  userName: [
    {
      required: false,
      message: '长度应不超过20个字符',
      max: 20,
      trigger: ['change', 'blur']
    }
  ],
  menuName: [
    {
      required: false,
      message: '长度应不超过20个字符',
      max: 20,
      trigger: ['change', 'blur']
    }
  ]
})

//表单靠左还是靠右
const searchFromJustify = ref<SearchFromJustify>('flexStart')

//搜索按钮配置
const searchButtons = ref<Array<SearchButton>>([
  {type: 'search'},
  {type: 'clear'}
])

//分页配置
const pageConfig = ref<PageConfig>({
  currentPage: defaultPage,
  pageSize: defaultPageSize,
  pageSizes: defaultPageSizes,
  total: 0,
  disabled: false,
  layout: defaultLayout
})



//后端数据拼接字段
const setTableData = (data: Array<GetLogList>) => {
  const dataArr: Array<GetLogList> = []
  data.forEach((item) => {
    dataArr.push({...item})
  })
  tableData.value = dataArr
}
// 获取搜索数据
const getSearchParams = (searchFromData:GetLogList):GetLogList => {

  const {loginName, userName, operationType, menuName, result, operationTime} = searchFromData
  const pararms:GetLogList = {loginName, userName, operationType, menuName, result}
  if (operationTime) {
    pararms.startTime = operationTime[0] + ' 00:00:00'
    pararms.endTime = operationTime[1] + ' 23:59:59'
  }

  return pararms
}
//搜索数据
const searchData = (resetPage?: boolean) => {
  showLoading.value = true
  if (resetPage) pageConfig.value.currentPage = 1
  const params = getSearchParams(searchFromData)

  getLogList({
    ...params,
    page: pageConfig.value.currentPage,
    limit: pageConfig.value.pageSize
  })
    .then((res) => {
      const {records} = res.data.data
      pageConfig.value.total =
        res.data.data.total === null ? 0 : res.data.data.total
      setTableData(records)
    })
    .catch((error) => {
      console.warn(error)
    })
    .finally(() => {
      showLoading.value = false
    })
}



//搜索事件
const onSubmit = () => {
  searchData(true)
}

//清除搜索栏数据
const clearForm = () => {
  searchData(true)
}

//清空搜索表单事件
const onFormClear = () => {
  searchFromData.operationTime = ''
  clearForm()
}
//分页尺寸改变事件
const onSizeChange = () => {
  searchData(true)
}

//当前页改变事件
const onCurrentChange = () => {
  searchData()
}

onActivated(() => {
  searchData()
})
onMounted(() => {
  getDict()
})
</script>

<template>
  <page-container>
    <d-table-promote
      :oper-buttons="operButtons"
      :search-form-items="searchFromItems"
      :search-buttons="searchButtons"
      :search-form-data="searchFromData"
      :search-rules="searchFromRules"
      :table-data="tableData"
      :table-header-data="tableHeaderData"
      :page-config="pageConfig"
      :search-from-justify="searchFromJustify"
      :show-loading="showLoading"
      :stripe="true"
      @form-submit="onSubmit"
      @form-clear="onFormClear"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
    />
  </page-container>
</template>

<style scoped></style>
<style>
.report-type .el-form-item__content{
  margin-left: 0 !important;
  width: unset;
}
.report-type .report-select-type{
  width: 106px;
  margin-right: 8px;
}
.report-type .ant-picker{
  width: 286px;
}
.report-type .report-select{
  width: 286px;
}
</style>

